<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="csrf-token" content="{{ csrf_token() }}" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="/admin/js/Highcharts.js" type="text/javascript" charset="utf-8"></script>
		<script src="/admin/js/rem.js" type="text/javascript" charset="utf-8"></script>
		  
		<title>河南全一安防</title>
		<Link Rel="SHORTCUT ICON" href="/admin/images/head_logo.png">
			<style type="text/css">
			*{margin: 0;padding: 0;}
	    	.header{width: 100%;height: 1.5rem;background-color:darkcyan;}
	    	.user a{text-decoration:none;font-size: 0.4rem;color: black;}
	    	.p1 a{position: absolute;top:1rem;left: 2.5rem;}
	    	.p2 a{position: absolute;top:1rem;left: 4.5rem;}
	    	.p3 a{position: absolute;top:1rem;left: 6.5rem;}
	    	.top{margin-top: 0.2rem;margin-left: 0.1rem;}
	    	.top li{list-style: none;float: left;margin-left: 0.05rem;}
	    	.top li img{width: 1rem;height: 1rem;}
	    	#dituContent{width: 96%;height: 5rem;border: 1px solid #ccc;margin: 0 auto;}
	    	.title{width:96.8%;font-size: 0.5rem;background-color: darkgoldenrod;text-align: center;margin: 0 auto;}
	    	#chart-title{width: 96.8%;height: 2.5rem;background-color: yellowgreen;margin: 0 auto;}
	    	#chart-title p{font-size: 0.4rem;float: left;margin-top: 0.2rem;}
	    	#yhbs{background-color: #36A2EB;display:inline-block;margin-left:0.2rem;width: 0.4rem;height: 0.4rem;vertical-align: middle;}
	    	#jydq{background-color: #4bc0c0;display:inline-block;margin-left:0.2rem;width: 0.4rem;height: 0.4rem;vertical-align: middle;}
	    	#wgcz{background-color: #ff9f40;display:inline-block;margin-left:0.2rem;width: 0.4rem;height: 0.4rem;vertical-align: middle;}
	    	#xy{background-color: #ff6384;display:inline-block;margin-left:0.2rem;width: 0.4rem;height: 0.4rem;vertical-align: middle;}
	    	#gyzh{background-color: #ffcd56;display:inline-block;margin-left:0.17rem;width: 0.4rem;height: 0.4rem;vertical-align: middle;}
	    	#zr{background-color: #66ff99;display:inline-block;margin-left:0.2rem;width: 0.4rem;height: 0.4rem;vertical-align: middle;}
	    	#qt{background-color: #d6d6d6;display:inline-block;margin-left:0.2rem;width: 0.4rem;height: 0.4rem;vertical-align: middle;}
	    	#chart-area{margin: 0 auto;display: block;}
	    	.BMap_bubble_title{position: absolute;top: -13px;}
	    	.BMap_bubble_content{line-height: 11px;position: absolute;top: 14px;}
			</style>
	</head>
	<body>
		<div class="header">
			<img src="/admin/images/213-50-0.png"/>
			<div class="user">
				<p class="p1"><a href="">{{ $admin['agent_name'] }}</a></p>
				<p class="p2"><a href="/admin/log/index">系统管理</a></p>
				<p class="p3"><a href="/admin/login/exit">退出</a></p>
				</div>
		</div>
		<div class="system">
				<div class="top">
				<li><img src="/admin/img/jizhanoff.png"/></li>
				<li><img src="/admin/img/yanganoff.png"/></li>
				<li><img src="/admin/img/hongwaioff.png"/></li>
				<li><img src="/admin/img/ranqioff.png"/></li>
				<li><img src="/admin/img/electricoff.png"/></li>
				<li><img src="/admin/img/call_help_off.png"/></li>
				<li><img src="/admin/img/relituoff.png"/></li>
				<li><img src="/admin/img/disanfangoff.png"/></li>
				<li><img src="/admin/img/yonghuoff.png"/></li>
				<li><img src="/admin/img/wuyeoff.png"/></li>
				<li><img src="/admin/img/xiaofangzhiduioff.png"/></li>
				<li><img src="/admin/img/lishizhaohuodianoff.png"/></li>
				<li><img src="/admin/img/alarmoff.png" id ='yjbjon'/></li>
				<li><a href="/admin/log/index"><img src="/admin/img/baobiaooff.png"/></a></li>
				<!-- <p><input type="checkbox" name="" id="" />全部显示</p> -->
			</div>
			<div id="dituContent">
			</div>
			<div class="shousuoright">
				<div class="right">
				<div class="title">全部消息</div>
				<div id="container" style="min-width:300px;height:300px;"></div>
				<div class="title">显示火灾原因的比例</div>
				<div id="chart-title">
					<p><span id="yhbs"></span>&nbsp;用户不慎</p>
					<p><span id="jydq"></span>&nbsp;家用电器</p>
					<p><span id="wgcz"></span>&nbsp;违规操作</p>
					<p><span id="xy"></span>&nbsp;吸&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;烟</p>
					<p><span id="gyzh"></span>&nbsp;故意纵火</p>
					<p><span id="zr"></span>&nbsp;自&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;燃</p>
					<p><span id="qt"></span>&nbsp;其&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;他</p>
				</div>
				<canvas id="chart-area" width="300px" height="300px"></canvas>
			</div>
			</div>
			
		</div>
		<div id="newMessageDIV"></div>
		<script type="text/javascript">

							Highcharts.chart('container', {
						      chart: {
						          type: 'column'
						      },
						      title: {
						          text: null
						      },
						      xAxis: {
						          type: 'category'
						      },
						    yAxis: {
						         title: {
						                text: null
						            }
						        },
						        legend: {
						            enabled: false
						        },
						        plotOptions: {
						            series: {
						                borderWidth: 0,
						                dataLabels: {
						                    enabled: true,
					                }
					            }
					        },
					        tooltip: {
					            headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
					            pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
					        },
					        series: [{
					            name: '数据展示',
					            colorByPoint: true,
				            data: [{
					                name: '自检',
					                y: 40,
					            }, {
					                name: '防拆报警',
					                y: 24,
					            }, {
					                name: '火灾报警',
					                y: 10,
					            }, {
						                name: '欠压报警',
						                y: 4,
						            }, {
						                name: '故障报警',
						                y: 2,
						            },]
						        }]
						    });	
		</script>
		<script src="/admin/js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<!-- <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script> -->
		<script src="http://cdn.bootcss.com/socket.io/1.3.7/socket.io.js"></script>
		<!-- <script src='http://lot.iqykj.com/msg/web/notify.js'></script> -->
	<!-- 	// <script src='//cdn.bootcss.com/jquery/1.11.3/jquery.js'></script> -->
		<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=U25vSd26q851cuSCjMCXuFkYYemWxvRs&services=&t=20170628183224"></script>
    	<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>  
    	<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script> 
    	<script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
    	<script type="text/javascript" src="/admin/js/Chart.min.js"></script>
		<script type="text/javascript" src="/admin/js/system.js" charset="utf-8"></script>
	</body>
</html>
